import React, { memo } from "react";

interface ChildProps {
  update(): void;
}

/*
  memo:
    1. 概念：高阶组件
    2. 作用：用来缓存组件
    3. 特点：只有当组件的state或props发生变化，组件才会重新渲染
*/
export default memo(function Child({ update }: ChildProps) {
  console.log("children render");

  const result = (
    <div className="box">
      Child
      <button onClick={update}>Child update count button</button>
    </div>
  );

  console.log(result);

  return result;
});
